<template>
  <div class="detailContainer">
    <DetailHeader :searchTitle="searchTitle" @categoryId="handleCategoryList" />
    <van-loading class="detailLoading" size="30px" vertical v-if = "showLoading">加载中...</van-loading>
    <div class="detailList" >
      <div class="detailItem" v-for="item in goodsDetailList" :key="item.id" @click="toGoodsDetail(item.goodsId)">
        <div class="img">
          <img v-lazy="item.listPicUrl" alt="" />
        </div>
        <div class="content">
          <div class="title">{{ item.name }}</div>
          <div class="middlePrice">
            <span class="leftPrice">
              <span class="smallPrice">￥</span>
              <span class="bigPrice">{{ item.retailPrice }}</span>
            </span>
            <span class="rightPrice">￥{{ item.sortOriginPrice }}</span>
          </div>
          <div class="Discount">
            <div class="disCountLeft">限时优惠</div>
            <div class="disCountRight">正在抢购中</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import DetailHeader from './components/DeatilHeader'
export default {
  name: "SearchDetail",
  data() {
    return {
      searchTitle:'',
      categoryId:0, // 点击分类的那项id
      showLoading:true, //加载效果
      goodsIdList: [11, 2, 2784, 12, 2869, 2558, 28, 3452, 3444, 3686, 4, 2561, 5, 871, 20,6, 3442, 3635, 2751, 24],
    };
  },
  computed: {
    ...mapGetters(["directlyList"]),
    goodsDetailList(){
      if(this.directlyList){
        let index = 0
        this.directlyList.forEach(item=>{
          if(index > this.goodsIdList.length - 1) {
            index = 0
          }
          item.goodsId = this.goodsIdList[index++]
        })
      }
      return this.directlyList
    }
  },
  methods: {
    // 点击跳转到商品详情页
    toGoodsDetail(goodsId){
      this.$router.push('/detail?goodsId=' + goodsId)
    },
    // 获取初始化数据
    getInitData() {
      let searchTitle = this.$route.query.keyword;
      this.searchTitle = searchTitle;
      const {categoryId} = this
      this.$store.dispatch("getAllKeywordsInfo", {searchTitle,categoryId});
    },
    // 根据分类项重新获取列表数据
    handleCategoryList(event){
      this.categoryId = event
      const {categoryId,searchTitle} = this
      this.$store.dispatch("getAllKeywordsInfo", {searchTitle,categoryId });
    }
  },
  mounted() {
    this.getInitData();
  },
  components:{
    DetailHeader
  },
  watch:{
    goodsDetailList(){
      this.showLoading = false
    }
  }
};
</script>

<style lang="less" scoped>
.detailContainer {
  background-color: #fff;
  overflow: hidden;
  .detailLoading{
    margin-top: 300px;
    
    margin-bottom: 350px;
  }
  .detailList {
    margin-top: 100px;
    padding: 0 0 0 10px;
    width: 97%;
    display: flex;
    flex-wrap: wrap;
    .detailItem {
      width: 46%;
      margin: 0 8px 10px 5px;
      .img {
        width: 100%;
        height: 155px;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        padding-top: 10px;
        .title {
          font-size: 14px;
          color: #0b0d11;
          font-weight: 500;
          text-align: left;
        }
        .middlePrice {
          margin: 5px 0;
          text-align: left;
          .leftPrice {
            color: rgb(250, 30, 50);
            font-weight: 700;
            .smallPrice {
              font-size: 0.3rem;
            }
            .bigPrice {
              font-size: 22px;
            }
          }
          .rightPrice {
            font-size: 0.24rem;
            color: rgb(153, 153, 153);
            text-decoration: line-through;
          }
        }
        .Discount {
          width: 100%;
          background-color: #ffe9eb;
          border-radius: 20px;
          height: 20px;
          font-size: 12px;
          font-weight: 700;
          .disCountLeft {
            float: left;
            padding: 2px 6px;
            background-color: rgb(250, 30, 50);
            color: #fff;
            border-radius: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
          }
          .disCountRight {
            float: left;
            height: 20px;
            line-height: 20px;
            color: rgb(250, 30, 50);
            padding: 2px 6px;
          }
        }
      }
    }
  }
}
</style>